<template>
	<view class="with-navbar">
		<juhe-navbar :options="navbarData"></juhe-navbar>
		<juhe-all></juhe-all>

		<!-- 普通列表 -->
		<view class="ul with-have-no-mt">
			<view class="title-box"><view class="title">普通列表</view></view>
			<view class="li-box with-have-no-click-bg" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name">不带点击效果的列表单项</view>
					<view class="sub-name">小标题</view>
					<view class="li-after">迷你文字</view>
					<view class="more iconfont">&#xe856;</view>
				</view>
			</view>

			<view class="li-box" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name">标题</view>
					<view class="sub-name">小标题</view>
					<view class="li-after">迷你文字</view>
					<view class="more iconfont">&#xe856;</view>
				</view>
			</view>

			<view class="li-box" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name" style="flex: 1;">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="more iconfont">&#xe856;</view>
				</view>
			</view>

			<view class="li-box">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name">两个icon</view>
					<view class="sub-name">小标题</view>
					<view class="li-after">迷你文字</view>
				</view>
			</view>
		</view>

		<view class="ul with-have-no-click-bg">
			<view class="title-box"><view class="title">普通列表 不带点击效果的列表整体</view></view>
			<view class="li-box" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name">不带点击效果的列表</view>
					<view class="sub-name">小标题</view>
					<view class="li-after">迷你文字</view>
				</view>
			</view>
			<view class="li-box with-have-click-bg" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<view class="name">带点击效果的列表单项</view>
					<view class="sub-name">小标题</view>
					<view class="li-after">迷你文字</view>
				</view>
			</view>
		</view>

		<view class="ul with-input">
			<view class="title-box"><view class="title">普通列表 配合输入框使用</view></view>
			<view class="li-box" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<input type="text" value="" placeholder="请输入内容" />
				</view>
			</view>

			<view class="li-box with-textarea" v-for="one of 1">
				<view class="li">
					<image src="../../static/logo.png" class="icon" mode=""></image>
					<textarea maxlength="-1" placeholder="请输入详情" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import JuheNavbar from '../../components/juhe-navbar.vue';
export default {
	components: {
		JuheNavbar
	},
	data() {
		return {
			navbarData: {
				leftIcons: [
					{
						'icon':'icon-arrowleft'
					}
				],
				rightIcons: [],
				center: {
					text: '列表'
				}
			}
		};
	}
};
</script>

<style lang="scss"></style>
